<!-- Popup new category -->
<div id="popup_category" class="hidden">

    <div class="content-box corners popup-buttons popup_new_category">
	<header>
	    <h3><img src="<?= $this->config->item('webroot') ?>images/icons/information.png" alt="" />Category</h3>
	    <span class="right-buttons">
		<img src="<?= $this->config->item('webroot') ?>images/ajax_loader_gray.gif" class="hidden loader" width="24" height="24" alt="" />
					<a href="#" class="btn nyroModalClose"><span class="icon icon-disk">&nbsp;</span>Save</a>
		<a href="#" class="btn nyroModalClose"><span class="icon icon-cancel">&nbsp;</span>Cancel</a>
	    </span>
	</header>
	<section class="width-95pc scrollable">
		<form id="form_category">
		<div class="box hidden"></div>
		<div class="colgroup full">
		    <div class="column width-95pc">

				<select onchange="">
					<option></option>
					<option>Abrasives</option>
					<option>Cleaning</option>
					<option>Electrical</option>
					<option>Hardware</option>
					<option selected="selected">Hand Tools</option>
					<option>Office Equipment</option>
					<option>Power Tools</option>
				</select>
			    
			    <a id="request_new_category" href="#" class="btn nyroModal align-right"><span class="icon icon-add">&nbsp;</span>Request New Category</a>


			    <br /><br />

			    

			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/benders.jpg" /><br />
				    Benders</a>
			    </div>
			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/clamps.jpg" /><br />
				    Clamps</a>
			    </div>
			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/crimpingTools.jpg" /><br />
				    Crimping Tools</a>
			    </div>
			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers.jpg" /><br />
				    Pliers</a>
			    </div>
			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/plumbingTools.jpg" /><br />
				    Plumbing Tools</a>
			    </div>
			    <div class="category_item to-hide">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/wrenches.jpg" /><br />
				    Wrenches</a>
			    </div>




			<div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/lockingPliers.jpg" /><br />
				    Locking Pliers</a>
			    </div>
			    <div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/multi-tool.jpg" /><br />
				    Multi-tool</a>
			    </div>
			    <div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/retainingAndLockRingPliers.jpg" /><br />
				    Retaining And Lock Ring Pliers</a>
			    </div>
			    <div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/slipJointAndTongueAndGroovePliers.jpg" /><br />
				    Slip Joint and Tongue and Groove Pliers</a>
			    </div>
			    <div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/solidJointPliers.jpg" /><br />
				    Solid Joint Pliers</a>
			    </div>
			    <div class="category_item hidden subcat">
				    <a href="#"><img src="<?= $this->config->item('webroot') ?>uploads/admin/materials/categories/pliers/wireTwistPliers.jpg" /><br />
				    Wire Twist Pliers</a>
			    </div>



		    </div>
		</div>
	    </form>
	</section>
    </div>

</div>
<!-- end of popup new category popup -->

<style>
	.category_item {
		float:left;
		margin-top:10px;
		margin-right:10px;
		width:100px;
		height:140px;
		border:1px solid #999;
		text-align: center;
		padding:5px;
	}

	#popup_category > div {
		width:800px;
		max-height:600px;
	}

</style>

<script>
	$('.category_item.to-hide a').click(function(){
		$('.to-hide').hide();
		$('.category_item.hidden').fadeIn('slow');
		COMMON.resize_modal('#popup_category',0,600);
		return false;
	});

	$('div.subcat a').click(function(){
		$('.right-buttons .nyroModalClose').trigger('click');
		$('#category2').show();
		$('#category3').show();
		$('table.material-search-results').show('fast');
	});

	$('#request_new_category').click(function(){
		prompt('Enter a category name. A request will be sent to the Administrator to create the category.');
		$('.right-buttons .nyroModalClose').trigger('click');
		$('#category1').hide();
		$('#category2').hide();
		$('#category3').hide();
		$('#category_pending').show();
		return false;
	});

</script>